import styled from "@emotion/styled";
import { Typography, List, Button, Divider, Popover } from "antd";
import React from "react";
import { useProject } from "utils/Project";
import { setProjectModalProps } from "authenticated-app";
export const Projectpopover = (props: setProjectModalProps) => {
  const { data: projects } = useProject();
  const { setProjectVisible } = props;
  const PinedPorject = projects?.filter((item) => item.pin === true);
  const content = (
    <ContentContainer>
      <Typography.Text>收藏项目</Typography.Text>
      <List
        dataSource={PinedPorject || []}
        renderItem={(item) => (
          <List.Item>
            <Typography.Text>{item.name}</Typography.Text>
          </List.Item>
        )}
      ></List>
      <Divider style={{ margin: "10px 0" }} />
      <Button onClick={() => setProjectVisible(true)}>创建项目</Button>
    </ContentContainer>
  );
  return (
    <Popover placement="bottom" content={content}>
      <span style={{ cursor: "pointer" }}>项目</span>
    </Popover>
  );
};
const ContentContainer = styled.div`
  min-width: 30rem;
`;
